<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>跃跃的个人网站</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link
            href="https://fonts.googleapis.com/css?family=Titillium+Web:400,300,300italic,400italic,600italic,600"
            rel="stylesheet"
            type="text/css"
    />
    <link rel="Stylesheet" href="css/master.css" type="text/css"/>
    <link
            rel="Stylesheet"
            href="https://ianlunn.github.io/Hover/css/hover.css"
            type="text/css"
    />
    <link
            rel="Stylesheet"
            href="https://fonts.googleapis.com/css?family=Muli"
            type="text/css"
    />
    <style type="text/css">
        html,
        body * {
            box-sizing: border-box;
            font-family: "Titillium Web", sans-serif;
            -webkit-font-smoothing: antialiased;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
        }

        body {
            background: -webkit-linear-gradient(
                    rgba(246, 247, 249, 0.8),
                    rgba(246, 247, 249, 0.8)
            ),
            url('https://zhaoyj.work/image/home_bg.jpg') no-repeat center center fixed;
            background: url('https://zhaoyj.work/image/home_bg.jpg') no-repeat center center fixed;
            background-size: cover;
            max-height: 100%;
        }

        nav {
            width: 100%;
            height: 48px;
            background: -webkit-linear-gradient(
                    rgba(35, 43, 85, 0.35),
                    rgba(35, 43, 85, 0.55)
            );
            background: linear-gradient(
                    rgba(255, 255, 255, 0.35),
                    rgba(255, 255, 255, 0.55)
            );
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
        }

        nav {
            text-align: center;
        }

        nav ul li:hover > ul {
            overflow: visible;
            max-height: 1240px;
            opacity: 1;
        }

        nav ul li:hover > ul li {
        }

        nav ul {
            margin: 0;
            list-style: none;
            position: relative;
            display: inline-table;
        }

        nav ul:after {
            content: "";
            clear: both;
            display: block;
        }

        nav ul li {
            float: left;
            height: 48px;
            line-height: 48px;
            transition: background 0.3s ease;
        }

        nav ul li:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        nav ul li:hover > a {
            color: #fff;
        }

        nav ul li a {
            display: block;
            padding: 0 40px;
            color: #919191;
            text-decoration: none;
        }

        nav ul ul {
            display: block;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: opacity 0.3s ease;

            background: -webkit-linear-gradient(
                    rgba(35, 43, 85, 0.35),
                    rgba(35, 43, 85, 0.55)
            );
            background: linear-gradient(
                    rgba(255, 255, 255, 0.35),
                    rgba(255, 255, 255, 0.55)
            );
            border-radius: 0px;
            padding: 0;
            position: absolute;
            top: 100%;
            box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
        }

        nav ul ul li {
            float: none;
            position: relative;
        }

        nav ul ul li a {
            padding: 0 40px;
            color: #919191;
            transition: all 0.5s ease;
            white-space: nowrap;
        }

        nav ul ul ul {
            position: absolute;
            left: 100%;
            top: 0;
        }

        .welcome {
            font-size: 57.6px;
            line-height: 64px;
            font-family: "Muli";
            color: #ecf0f1;
            height: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -165px;
        }

        .welcome:before {
            content: "[";
            position: absolute;
            left: -30px;
            line-height: 64px;
        }

        .welcome:after {
            content: "]";
            position: absolute;
            right: -30px;
            line-height: 64px;
        }

        .welcome:after,
        .welcome:before {
            font-family: "Muli";
            color: #acacac;
            font-weight: 500;
            font-size: 64px;
            animation: 2s linear 0s normal none infinite opacity;
            -webkit-animation: 2s ease-out 0s normal none infinite opacity;
            -moz-animation: 2s ease-out 0s normal none infinite opacity;
            -o-animation: 2s ease-out 0s normal none infinite opacity;
        }

        .visible {
            float: left;
            font-weight: 600;
            overflow: hidden;
            height: 64px;
        }

        .welcome p {
            display: inline;
            float: left;
            margin: 0;
        }

        .welcome ul {
            margin-top: 0;
            padding-left: 284px;
            text-align: left;
            list-style: none;
            animation: 6s linear 0s normal none infinite change;
            -webkit-animation: 6s linear 0s normal none infinite change;
            -moz-animation: 6s linear 0s normal none infinite change;
            -o-animation: 6s linear 0s normal none infinite change;
        }

        .welcome ul li {
            line-height: 64px;
            margin: 0;
        }

        .right-layout {
            color: white;
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 20%;
            top: 40%;
            text-align: center;
        }

        .func_layout {
            padding: 0px;
        }

        .right-layout > .func_layout {
            visibility: hidden;
        }

        .right-layout:hover > .func_layout {
            visibility: visible;
        }

        @-webkit-keyframes opacity {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes opacity {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        @-webkit-keyframes change {
            0% {
                margin-top: 0;
            }
            15% {
                margin-top: 0;
            }
            25% {
                margin-top: -64px;
            }
            40% {
                margin-top: -64px;
            }
            50% {
                margin-top: -128px;
            }
            65% {
                margin-top: -128px;
            }
            75% {
                margin-top: -64px;
            }
            85% {
                margin-top: -64px;
            }
            100% {
                margin-top: 0;
            }
        }

        @keyframes change {
            0% {
                margin-top: 0;
            }
            15% {
                margin-top: 0;
            }
            25% {
                margin-top: -64px;
            }
            40% {
                margin-top: -64px;
            }
            50% {
                margin-top: -128px;
            }
            65% {
                margin-top: -128px;
            }
            75% {
                margin-top: -64px;
            }
            85% {
                margin-top: -64px;
            }
            100% {
                margin-top: 0;
            }
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href=".">首页</a></li>
        <li>
            <a href="#">项目</a>
            <ul>
                <li><a target="_Blank" href="https://zhaoyj.work/poetry/docs/">Django项目</a></li>
                <li><a target="_Blank" href="https://zhaoyj.work/express/">Express项目</a></li>
                <li><a target="_Blank" href="https://zhaoyj.work/wzd_h5/">Vue移动端</a></li>
            </ul>
        </li>
        <li>
            <a href="#">小程序</a>
            <ul>
                <li><a target="_Blank" href="https://juejin.im/post/6854573208318771214">微信小程序</a></li>
                <li><a target="_Blank" href="https://blog.csdn.net/a_yue10/article/details/108199704">字节跳动小程序</a></li>
                <li>
                    <a href="#">框架</a>
                    <ul>
                        <li><a target="_Blank" href="https://juejin.im/post/6865873375932186638">滴滴Mpx框架</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a target="_Blank" href="https://juejin.im/user/782508011296295/posts">掘金</a>
        </li>
        <li><a target="_Blank" href="https://github.com/yueyue10">Github</a></li>
    </ul>
</nav>

<div class="welcome">
    欢迎访问
</div>
<div class="right-layout">
    <div>
        <h3 style="margin: 0px;color: #e5021e">html示例</h3>
    </div>
    <ul class="func_layout">
        <li><a target="_Blank" href="checkbox.html">checkbox</a></li>
        <li><a target="_Blank" href="PartnersInCrime.html">合作伙伴</a></li>
        <li><a target="_Blank" href="starlight.html">星光效果</a></li>
        <li><a target="_Blank" href="summer.html">夏日之梦</a></li>
        <li><a target="_Blank" href="VideoUI.html">电影界面</a></li>
    </ul>
</div>
</body>
</html>
